<template>
    <div class="container yuan-container">

        <a-card title="我的委托">
            <a-tabs type="card" :default-active-key="pageType" @change="tabChange">
                <a-tab-pane v-for="item in typeArr" :key="item.val" :tab="item.title"></a-tab-pane>
            </a-tabs>
            <div class="table">
                <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id" :columns="columns" :data-source="pageList"
                    :pagination="pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-button style="margin-left:10px" type="primary" @click="clickShow(record)">查看</a-button>
                            <a-button style="margin-left:10px" type="primary" @click="clickRecommend(record)">智能推荐</a-button>
                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <AccDetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" @resetList="resetList" :editId="editId"
            :isShow="true" v-if="pageType==='CG'" />
        <AccRecommendVue :visible="recommendVisible" @closeModal="() => recommendVisible = false" :recId="editId"
            @resetList="resetList" v-if="pageType==='CG'" />
        <DemandDetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" @resetList="resetList"
            :editId="editId" :isShow="true" v-if="pageType==='XQ'" />
        <DemandRecommendVue :visible="recommendVisible" @closeModal="() => recommendVisible = false" :recId="editId"
            @resetList="resetList" v-if="pageType==='XQ'" />
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import api from "@/api/api";
import { h } from "vue";
import config from "@/utils/config";
import AccDetailVue from "@/views/achievement/detail.vue";
import DemandDetailVue from "@/views/demand/detail.vue";
import AccRecommendVue from "@/views/achievement/recommend.vue";
import DemandRecommendVue from "@/views/demand/recommend.vue";
@Component({
    name: "tpl",
    components: { AccDetailVue, DemandDetailVue, AccRecommendVue, DemandRecommendVue },
})
export default class extends Vue {
    loading = false;
    pageList = [];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    columns: any[] = [];
    columnsDemand = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "companyName",
            key: "companyName",
            title: "企业/单位名称",
        },
        {
            align: "center",
            dataIndex: "demandName",
            key: "demandName",
            title: "需求名称",
        },
        {
            align: "center",
            dataIndex: "category",
            key: "category",
            title: "需求分类",
        },
        {
            align: "center",
            dataIndex: "investmentMin",
            key: "investmentMin",
            title: "预计投入金额范围",
            customRender: (text: string, record: any, index: number) => {
                if (record.investmentMin) {
                    return record.investmentMin + "-" + record.investmentMax + "万元";
                }
                return "--";
            },
        },
        {
            align: "center",
            dataIndex: "contacts",
            key: "contacts",
            title: "联系人",
        },
        {
            align: "center",
            dataIndex: "state",
            key: "state",
            title: "状态",
            customRender: (text: string, record: any, index: number) => {
                const data = {
                    0: { title: "资料审核", class: "status-words c-primary" },
                    1: { title: "征集中", class: "status-words c-primary" },
                    2: { title: "对接中", class: "status-words c-success" },
                    4: { title: "已公示", class: "status-words c-success" },
                    3: { title: "待审核", class: "status-words c-warning" },
                    5: { title: "已失败", class: "status-words c-danger" },
                };
                const dataOne = data[record.state] || {};
                const dom = h("div", { class: dataOne.class || "" }, config.demandType[record.state]);
                return dom;
            },
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 240,
            scopedSlots: { customRender: "action" },
        },
    ];
    columnsAch = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "achievementPrincipal",
            key: "achievementPrincipal",
            title: "成果负责人",
        },
        {
            align: "center",
            dataIndex: "achievementName",
            key: "achievementName",
            title: "成果名称",
        },
        {
            align: "center",
            dataIndex: "achievementCategory",
            key: "achievementCategory",
            title: "成果类别",
        },
        {
            align: "center",
            dataIndex: "belongToTechnologyCategory",
            key: "belongToTechnologyCategory",
            title: "所属技术分类",
            customRender: (text: string, record: any, index: number) => {
                if (record.belongToTechnologyCategory) {
                    return record.belongToTechnologyCategory.join(",");
                }
                return "";
            },
        },
        {
            align: "center",
            dataIndex: "status",
            key: "status",
            title: "状态",
            customRender: (text: string, record: any, index: number) => {
                const data = {
                    0: { title: "资料审核", class: "status-words c-primary" },
                    1: { title: "征集中", class: "status-words c-primary" },
                    2: { title: "对接中", class: "status-words c-success" },
                    3: { title: "待审核", class: "status-words c-warning" },
                    4: { title: "已转化", class: "status-words c-success" },
                    5: { title: "已公示", class: "status-words c-success" },
                    6: { title: "已失败", class: "status-words c-danger" },
                };
                const dataOne = data[record.state] || {};
                const dom = h("div", { class: dataOne.class }, dataOne.title);
                return dom;
            },
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 240,
            scopedSlots: { customRender: "action" },
        },
    ];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await api.getMyEntrustList({
                pageNum: this.pagination.current,
                pageSize: this.pagination.pageSize,
                type: this.pageType,
            });
            this.pageList = res.data?.rows ||[];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }
    typeArr = [
        { title: "委托需求", val: "XQ" },
        { title: "委托成果", val: "CG" },
    ];
    pageType = "XQ";
    tabChange(e: string) {
        if (e === "XQ") {
            this.columns = this.columnsDemand;
        } else {
            this.columns = this.columnsAch;
        }
        this.pageType = e;

        this.resetList();
    }

    mounted() {
        this.columns = this.columnsDemand;
        this.getList();
    }
    editId = "";
    detailVisible = false;
    recommendVisible=false
    clickShow(item) {
        this.editId = item.id;
        this.detailVisible = true;
    }
    clickRecommend(item) {
        this.editId = item.id;
        this.recommendVisible = true;
    }
}
</script>
<style scoped lang="scss">
.container {
}
</style>
